﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="ScrollGrid.aspx.cs" Inherits="DemoGrid.ScrollGrid" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script language="javascript" type="text/javascript">

        var hidGridStartPage = 3;
        var bgPage = 0;

        $(document).ready(function () {
            FillChildGrid(hidGridStartPage);
        });
        
        function FillChildGrid(pageId) {
            var childGridDiv = $('#divChildGrid');
            if (childGridDiv) {
                var totalRecordsCount = $('#<%=hidTotalRecCount.ClientID %>').val();
                var pageRecordsCount = $('#<%=hidPageRecCount.ClientID %>').val();

                if ((pageId > 0) && (parseInt(totalRecordsCount) > (parseInt(pageRecordsCount) * (parseInt(pageId) - 1)))) {
                    var hidGridUrl = 'HiddenGrid.aspx?PageId=' + pageId + '&PageRecordsCount=' + pageRecordsCount;
                    $.ajax({ url: hidGridUrl,
                             type: "POST", 
                             dataType: "text",
                             success: function (result) {
                                //alert(result);             
                                $('#divChildGrid').append($('<div>').html(result));
                                hidGridStartPage++;
                           }
                    });
                }
            }
        }
         
        //on scroll - pulling data from db by AJAX.
        function AppendRows(div) {
            if (hidGridStartPage - bgPage > 0) {                
                bgPage = hidGridStartPage;
                FillChildGrid(hidGridStartPage);               
            }
        }
        
    
    </script>
</asp:Content>


<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <div id="GridViewContainer" style="width:100%;height:600px;overflow: auto" onscroll="AppendRows(this)">
        <asp:GridView ID="grdEmployeeDtls" runat="server" AutoGenerateColumns="False" TabIndex="1" 
            AllowPaging="false" DataKeyNames="ID" Width="100%" GridLines="Both" CellPadding="3" 
            AllowSorting="false" BackColor="White">     
            
            <Columns>                
                <asp:BoundField DataField="ID" HeaderText="Employee Id">
                <ItemStyle Width="10%" />
                </asp:BoundField>

                <asp:BoundField DataField="EmployeeName" HeaderText="Employee Name">
                <ItemStyle Width="10%" />
                </asp:BoundField>

                <asp:BoundField DataField="Location" HeaderText="Location">
                <ItemStyle Width="10%" />
                </asp:BoundField>

                
                <asp:BoundField DataField="Department" HeaderText="Department">
                <ItemStyle Width="10%" />
                </asp:BoundField>
             </Columns>

            <EmptyDataTemplate>
                <div>
                    <p style="color:Red">No records found.</p>
                </div>
            </EmptyDataTemplate>            
            <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
            <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
            <AlternatingRowStyle BackColor="#F7F7F7" />           
        </asp:GridView>
        <div id="divChildGrid">
        </div>
    </div>
    <input id="hidInitPageNumber" type="hidden" value="0" runat="server" />
    <input id="hidTotalRecCount" type="hidden" value="0" runat="server" />
    <input id="hidPageRecCount" type="hidden" value="0" runat="server" />
</asp:Content>

